<template>
<div class="box">
    <!-- <el-card class="box-card">
        <div slot="header" class="clearfix">
            <span>详情</span>
            <el-button size="mini" style="float: right; padding: 3px 0" type="text" @click="back">返回</el-button>
        </div>
        <div v-for="(item,index) in list" :key="index" class="text item">
            {{'列表内容 ' }}
        </div>
    </el-card> -->

    <div class="left" :style={height:height}>
        <div class="head">
            <div>检索结果:</div>
            <div style="margin-top:5px">{{index}}/{{total}}</div>
        </div>
        <div class="list">
            <div @click="itemClick(item)" class="item" :class="{activeItem:item.id==id}" v-for="(item,index) in list" :key=index>
                <div>{{item.public_number}}</div>
                <div class="itemTxt" :title="item.title" style="margin-top:5px">{{item.title}}</div>
            </div>

        </div>
        <div class="page">
            <div @click="indexChange(0)">上一页</div>
            <div @click="indexChange(1)" style="margin-left:20px">下一页</div>
        </div>

    </div>
    <div class="right">
        <div class="head">
            <div>
                <el-button type="primary" size="mini" @click="back">返回</el-button>
            </div>
            <div class="title">
                <div>
                    <span style="color:#cccccc;margin-right:14px">{{row.public_number}}</span>
                    <el-button size="mini" plain>{{row.legal_status}}</el-button>
                </div>
                <div style="margin-top: 10px;font-size:15px">
                    {{row.title}}
                </div>
            </div>
        </div>
        <div class="content" style="margin-top:10px">
            <div style="display:flex;flex-direction:row;margin-left:12px">
                <el-card class="box-card">
                    <div slot="header" class="clearfix">
                        <span style="font-size:14px;font-weight:700">专利基本信息</span>
                    </div>
                    <div style="font-size: 14px;margin-bottom:4px">
                        <span>申请号:&nbsp;&nbsp;&nbsp;</span>
                        <span>{{row.application_number}}</span>
                    </div>
                    <div style="font-size: 14px;margin-bottom:4px">
                        <span>公开(公告)号:&nbsp;&nbsp;&nbsp;</span>
                        <span>{{row.public_number}}</span>
                    </div>

                    <div style="font-size: 14px;margin-bottom:4px">
                        <span>IPC主分类号:&nbsp;&nbsp;&nbsp;</span>
                        <span>{{row.ipc_main||"暂无"}}</span>
                    </div>
                    <div style="font-size: 14px;margin-bottom:4px">
                        <span>专利类型:&nbsp;&nbsp;&nbsp;</span>
                        <span>{{row.patent_type}}</span>
                    </div>
                    <div style="font-size: 14px;margin-bottom:4px">
                        <span>维持年限:&nbsp;&nbsp;&nbsp;</span>
                        <span>暂无</span>
                    </div>
                    <div style="font-size: 14px;margin-bottom:4px">
                        <span>名称和地址:&nbsp;&nbsp;&nbsp;</span>
                        <span>{{row.inventors}}-{{row.assignees}}</span>
                    </div>
                    <div style="font-size: 14px;margin-bottom:4px">
                        <span>申请人:&nbsp;&nbsp;&nbsp;</span>
                        <span>{{row.applicants}}</span>
                    </div>

                    <div style="font-size: 14px;margin-bottom:4px">
                        <span>发明人:&nbsp;&nbsp;&nbsp;</span>
                        <span>{{row.inventors}}</span>
                    </div>
                    <div style="font-size: 14px;margin-bottom:4px">
                        <span>当前权利人:&nbsp;&nbsp;&nbsp;</span>
                        <span>{{row.assignees}}</span>
                    </div>
                    <div style="font-size: 14px;margin-bottom:4px">
                        <span>代理机构:&nbsp;&nbsp;&nbsp;</span>
                        <span>{{row.agency||"暂无"}}</span>
                    </div>
                    <div style="font-size: 14px;margin-bottom:4px">
                        <span>发明人(设计人)个数:&nbsp;&nbsp;&nbsp;</span>
                        <span>{{row.inventors_count}}</span>
                    </div>
                    <div style="font-size: 14px;margin-bottom:4px">
                        <span>申请日:&nbsp;&nbsp;&nbsp;</span>
                        <span>{{row.application_date}}</span>
                    </div>
                    <div style="font-size: 14px;margin-bottom:4px">
                        <span>申请年:&nbsp;&nbsp;&nbsp;</span>
                        <span>{{row.public_year}}</span>
                    </div>
                    <div style="font-size: 14px;margin-bottom:4px">
                        <span>公开(公告)日:&nbsp;&nbsp;&nbsp;</span>
                        <span>{{row.public_date}}</span>
                    </div>
                    <div style="font-size: 14px;margin-bottom:4px">
                        <span>公开年:&nbsp;&nbsp;&nbsp;</span>
                        <span>{{row.public_year}}</span>
                    </div>
                </el-card>

                <el-card class="box-card" style="margin-left:20px">
                    <div slot="header" class="clearfix">
                        <span style="font-size:14px;font-weight:700">法律信息</span>
                    </div>

                    <div style="font-size: 14px;margin-bottom:4px">
                        <span>法律状态:&nbsp;&nbsp;&nbsp;</span>
                        <span>{{row.legal_status}}</span>
                    </div>

                    <div style="font-size: 14px;margin-bottom:4px">
                        <span>许可次数:&nbsp;&nbsp;&nbsp;</span>
                        <span>{{row.licensed_count}}</span>
                    </div>
                    <div style="font-size: 14px;margin-bottom:4px">
                        <span>转让次数:&nbsp;&nbsp;&nbsp;</span>
                        <span>{{row.transfered_count||0}}</span>
                    </div>
                    <div style="font-size: 14px;margin-bottom:4px">
                        <span>质押次数:&nbsp;&nbsp;&nbsp;</span>
                        <span>{{row.pledges_count}}</span>
                    </div>
                    <div style="font-size: 14px;margin-bottom:4px">
                        <span>被引用次数:&nbsp;&nbsp;&nbsp;</span>
                        <span>{{row.cited_count}}</span>
                    </div>
                    <div style="font-size: 14px;margin-bottom:4px">
                        <span>专利被提起无效次数:&nbsp;&nbsp;&nbsp;</span>
                        <span>{{row.patent_invalidation_count}}</span>
                    </div>

                    <div style="font-size: 14px;margin-bottom:4px">
                        <span>是否专利被宣告无效:&nbsp;&nbsp;&nbsp;</span>
                        <span>{{ row.is_patent_invalidation==0 ?"否":"是" }}</span>
                    </div>
                    <div style="font-size: 14px;margin-bottom:4px">
                        <span>是否涉诉专利:&nbsp;&nbsp;&nbsp;</span>
                        <span>{{row.has_lawsuit==0 ?"否":"是"}}</span>
                    </div>
                    <div style="font-size: 14px;margin-bottom:4px">
                        <span>是否复审:&nbsp;&nbsp;&nbsp;</span>
                        <span>{{row.has_recheck==0 ?"否":"是"}}</span>
                    </div>

                </el-card>
            </div>

            <div style="display:flex;flex-direction:row;margin-top:20px;margin-left:12px">
                <el-card class="box-card">
                    <div slot="header" class="clearfix">
                        <span style="font-size:14px;font-weight:700">专利价值</span>
                    </div>

                    <div style="font-size: 14px;margin-bottom:4px">
                        <span>是否高价值专利:&nbsp;&nbsp;&nbsp;</span>
                        <span>{{row.is_high_cost==0 ?"否":"是"}}</span>
                    </div>
                    <div style="font-size: 14px;margin-bottom:4px">
                        <span>专利评分:&nbsp;&nbsp;&nbsp;</span>
                        <span>{{row.patent_score||"暂无"}}</span>
                    </div>
                    <div style="font-size: 14px;margin-bottom:4px">
                        <span>专利估值(万元):&nbsp;&nbsp;&nbsp;</span>
                        <span>{{row.patent_cost||"暂无"}}</span>
                    </div>

                    <div style="font-size: 14px;margin-bottom:4px">
                        <span>高价值专利要素-战略性新兴产业:&nbsp;&nbsp;&nbsp;</span>
                        <span>{{row.is_strategic_emerging==0 ?"否":"是"}}</span>
                    </div>
                    <div style="font-size: 14px;margin-bottom:4px">
                        <span>高价值专利要素-是否有海外同族:&nbsp;&nbsp;&nbsp;</span>
                        <span>{{row.has_abroad_family==0 ?"否":"是"}}</span>
                    </div>
                    <div style="font-size: 14px;margin-bottom:4px">
                        <span>高价值专利要素-发明维持超过10年:&nbsp;&nbsp;&nbsp;</span>
                        <span>{{row.is_duration_ten_year==0 ?"否":"是"}}</span>
                    </div>
                    <div style="font-size: 14px;margin-bottom:4px">
                        <span>高价值专利要素-较高质押融资金额:&nbsp;&nbsp;&nbsp;</span>
                        <span>{{row.is_high_inventory==0 ?"否":"是"}}</span>
                    </div>
                    <div style="font-size: 14px;margin-bottom:4px">
                        <span>高价值专利要素-获得国家科学技术奖或中国专利奖:&nbsp;&nbsp;&nbsp;</span>
                        <span>{{row.has_reward==0 ?"否":"是"}}</span>
                    </div>

                </el-card>

                <el-card class="box-card" style="margin-left:20px">
                    <div slot="header" class="clearfix">
                        <span style="font-size:14px;font-weight:700">专利奖</span>
                    </div>
                    <div style="font-size: 14px;margin-bottom:4px">
                        <span>中国专利奖项:&nbsp;&nbsp;&nbsp;</span>
                        <span>{{row.reward_name||"暂无"}}</span>
                    </div>
                    <div style="font-size: 14px;margin-bottom:4px">
                        <span>中国专利奖等级:&nbsp;&nbsp;&nbsp;</span>
                        <span>{{row.reward_level||"暂无"}}</span>
                    </div>
                    <div style="font-size: 14px;margin-bottom:4px">
                        <span>地方专利奖项:&nbsp;&nbsp;&nbsp;</span>
                        <span>{{row.region_reward_name||"暂无"}}</span>
                    </div>

                </el-card>
            </div>

        </div>
    </div>

</div>
</template>

<script>
import {
    toRetrieval
} from '@/api/retrieval'
export default {
    name: 'Detail',
    data() {
        return {

            height: (window.innerHeight - 50) + 'px',
            index: 1,
            total: 100,
            list: [],
            id: 1,
            row: {}
        }
    },
    created() {

    },
    mounted() {
        this.index = localStorage.getItem("searchIndex")
        this.total = Math.ceil(localStorage.getItem("total") / 20)
        window.onresize = () => {
            //    console.log("1")
            this.height = (window.innerHeight - 50) + "px"

        }
        this.list = this.formatList(JSON.parse(localStorage.getItem("tableData")))
        this.row = JSON.parse(localStorage.getItem("resultItem"))

        this.id = this.row.id

    },
    methods: {
        itemClick(item) {
            this.id = item.id
            this.row = item
            // console.log("id", item)
        },
        back() {
            this.$router.go(-1)
        },
        formatList(list) {
            let id = 0
            list.forEach(item => {
                id = id + 1
                item.id = id
            })
            return list
        },
        indexChange(type) {
            if (type == 0) {

                this.index = (this.index - 1) == 0 ? 1 : this.index - 1
                let data = JSON.parse(localStorage.getItem("searchData"))
                data.pageIndex = this.index

                toRetrieval(data).then(res => {
                    // console.log("数据", res.data)
                    let {
                        total,
                        values
                    } = res.data

                    this.list = this.formatList(values)
                    let arr = this.list.filter(item => {
                        return item.id == this.id
                    })
                    this.row = arr[0]

                })

            }
            if (type == 1) {
                this.index = (this.list.length < 20) ? this.index : Number(this.index) + 1
                let data = JSON.parse(localStorage.getItem("searchData"))
                data.pageIndex = this.index

                toRetrieval(data).then(res => {
                    // console.log("数据", res.data)
                    let {
                        total,
                        values
                    } = res.data

                    this.list = this.formatList(values)
                    let arr = this.list.filter(item => {
                        return item.id == this.id
                    })
                    this.row = arr[0]

                })

            }
        }

    },

}
</script>

<style lang="scss" scoped>
.box {
    width: 100%;
    // overflow: auto;
    // height: 100%;
    // border: 1px solid #ebebeb;
    // box-shadow: 4px 4px 4px #efeeee;
    // border-radius: 6px;S
    // position: relative;
    // left: 50%;
    // transform: translateX(-50%);
    // padding-bottom: 20px;
    // top:20px;

    display: flex;

    .left {
        width: 250px;
        overflow: hidden;
        border-right: 2px solid #cccccc;
        display: flex;
        flex-direction: column;

        .head {
            width: 100%;
            background-color: rgb(135, 141, 173);
            height: 50px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: left;
            color: #ffffff;
            font-size: 14px;
            padding-left: 20px;
            font-weight: 700;
        }

        .list {
            flex: 1;
            overflow: auto;
            width: calc(100% + 20px);

            .item {
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: left;
                color: #ffffff;
                font-size: 14px;
                padding-left: 20px;
                padding-right:30px;
                height: 50px;
                background-color: rgba(135, 141, 173, .8);

                .itemTxt {
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    line-clamp: 2;
                }
            }

            .activeItem {

                background-color: rgb(65, 73, 96);

            }

        }

        .page {
            width: 100%;
            height: 40px;
            display: flex;
            font-size: 14px;
            background-color: rgb(135, 141, 173);
            ;
            flex-direction: row;
            justify-content: center;
            align-items: center;
        }
    }

    .right {
        flex: 1;
        width: 100%;

        .head {
            margin-top: 12px;
            margin-left: 12px;
            display: flex;
            flex-direction: row;
            align-items: center;

            .title {
                margin-left: 20px;
                font-size: 14px;
            }
        }

        .content {
            .box-card {
                width: 600px;
            }
        }

    }

}
</style>
